<template>
    <div class="calendar-top">
        <div class="date-select">
            <select v-model="year">
                <option v-for="year in years" :key="year" :value="year">{{ year }}年</option>
            </select>
            <span @click="prevMonth"> < </span>
            <select v-model="month">
                <option v-for="month in months" :key="month" :value="month">{{month}}月</option>
            </select>
            <span @click="nextMonth"> > </span>
        </div>
        <div class="today">
            <button @click="backToToday">今天</button>
        </div>
    </div>
</template>
<!-- 
1.渲染年和月的列表
2.选择年和月并修改数据
3.今天和箭头的点击事件
-->
<script setup>
import { ref,onMounted } from "vue";
import { storeToRefs } from "pinia";
import { createYears, createMonths } from '@/utils/index.js'
import { useCalendarStore } from "@/stores/calendar.js";
const years=ref([])
const months=ref([])
// 若直接赋值const years=createYears(),years将是一个普通变量，而非响应式引用。
// 当组件被成功挂载到DOM后,触发onMounted钩子
onMounted(()=>{
    years.value=createYears()
    months.value=createMonths()
})

const {year,month,date}=storeToRefs(useCalendarStore())
const {backToToday,prevMonth,nextMonth}=useCalendarStore()

</script>

<style lang="scss" scoped>
.calendar-top{
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
    background-image: -o-linear-gradient(
        180deg,
        rgba(51,186,255,0.1)0%,
        rgba(51,186,255,0)100%,
    );
    background-size: cover;
    border-radius: 16px 16px 0 0;
    .date-select{
        color: #333;
        select{
            padding: 4px 10px;
            border: 1px solid #eee;
            outline: none;
            border-radius: 6px;
            user-select: none;
            &:hover{
                border: 1px solid #ccc;
                cursor: pointer;
            }
        }
        span{
            user-select: none;
            cursor: pointer;
        }
    }

    .today{
        button{
            padding: 4px 10px;
            border: 1px solid #eee;
            outline: none;// 去除默认焦点轮廓
            border-radius: 6px;
            background-color: #fff;
            user-select: none;
            &:hover{
                border: 1px solid #ccc;
                cursor: pointer;
            }
        }
    }
}
</style>